{% extends 'music/base.html' %}

{% block body%}

    <div class="container-fluid songs-container">
        <div class="row">
            
            <!-- Left Album info -->
            <div class="col-sm-4 col-md-3">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <a href="{% url 'music:detail' album.id %}">
                            <img src="{{ album.album_logo.url }}" class="img-responsive">
                        </a>

                        <h1>{{ album.album_title }}
                            <small>{{ album.genre }}</small>
                        </h1>
                        <h2>{{ album.artist }}</h2>
                    </div>
                </div>
            </div>

            <!-- Right Song info -->
            <div class="col-sm-8 col-md-9">
                
                <ul class="nav nav-pills" style="margin-bottom: 10px;">
                    <li class="active"><a href="{% url 'music:detail' album.id %}">View ALL</a></li>
                    <li><a href="#">Add New Song</a></li>
                </ul>

                <div class="panel panel-default">
                    <div class="panel-body">
                            <h3>All Songs</h3>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Title</th>
                                        <th>Audio File</th>
                                        <th>Favorite</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                            </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!--
    <img src="{{ album.album_logo }}">

    <h1>{{ album.album_title }}</h1>
    <h3>{{ artist }}</h3>

    {% if error_message %}
        <p><strong>{{ error_message }}</strong></p>
    {% endif %}

    <form action="{% url 'music:favorite' album.id %}" method="post">
        {% csrf_token %}
        {% for song in album.song_set.all %}
            <input type="radio" id ="song{{ forloop.counter }}" name="song" value="{{ song.id }}" />
            <label for="song{{ forloop.counter }}">
                {{ song.song_title }}
                {% if song.is_favorite %}
                    <img src="http://i.imgur.com/b9b13Rd.png" />
                {% endif %}
            </label><br>
        {% endfor %}
        <input type="submit" value="Favorite">
    </form>

    <ul>
        {% for song in album.song_set.all %}
            <li>{{ song.song_title }} - {{ song.file_type }}</li>
        {% endfor %}

    </ul>
-->
{% endblock %}


